<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table {
				width: 60%;
				height: auto;
				border-spacing: 0px;
				border: 1px solid black;
			}
			td:nth-child(1) {
				width: 10%;
				height: 20px;
				text-align: center;
				border: 1px solid black;
			}
			td:nth-child(2) {
				width: 15%;
				height: 20px;
				text-align: center;
				border: 1px solid black;
			}
			td:nth-child(3) {
				width: 50%;
				height: 20px;
				text-align: center;
				border: 1px solid black;
			}
			td:nth-child(4) {
				width: 25%;
				height: 20px;
				text-align: center;
				border: 1px solid black;
			}
			tr:nth-child(even) {
				background: gray;
			}
		</style>
	</head>
	<body>
		<input type="button" value="删除" id="sc"/> 一共有
		<span id="zg"></span>封邮件，你选中了<span id="xz">0</span>封邮件
		<br />
		<br />
		<table>
			<tr id="head">
				<td><input type="checkbox"></td>
				<td>发件人</td>
				<td>主题</td>
				<td>时间</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三1</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>张三</td>
				<td>列子</td>
				<td>2018年6月1日</td>
			</tr>
		</table>
		<script>
			var sc = document.getElementById('sc');
			var zg = document.getElementById('zg');
			var xz = document.getElementById('xz');
			var all = document.getElementById('head');
			var box = document.getElementsByTagName('input');
			all.addEventListener('click', myfun, false);
			var num = box.length - 2;
			zg.innerHTML = num;
			var n = 0;
			if(box[1].checked) {
				xz.innerHTML = '11';
			} else {
				for(var j = 1; j < box.length; j++) {
					box[j].onclick = function() {
						n = 0;
						for(var i = 2; i < box.length; i++) {
							if(box[i].checked) {
								n++;
							}
							xz.innerHTML = n;
						}
					}
				}
			}
			function myfun() {
				for(var i = 1; i < box.length; i++) {
					box[i].checked = event.target.checked;
				}
			}
			/*sc.onclick=function(){
				for(int i=2;i<box.length;i++){
					if(box[i].checked==true){
						box[i].remove();
					}
				}
			}*/
		</script>
	</body>
</html>
